// src/components/profile/TrackData.jsx
import React, { useEffect, useState } from 'react';
import { getItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const TrackData = () => {
  const [stats, setStats] = useState(null);
  const { user } = useAuth();

  useEffect(() => {
    if (!user) return;

    const storedStats = JSON.parse(getItem('user_track_stats') || 'null');
    if (!storedStats) {
      const initialStats = {
        totalRaces: 25,
        bestLapTime: '1:32.456',
        averageLapTime: '1:35.789',
        totalHours: 48,
        rankings: {
          weekly: 5,
          monthly: 8,
          allTime: 15
        },
        recentAchievements: [
          {
            id: 1,
            title: '速度之王',
            description: '在上海国际赛道创下最快圈速',
            date: '2024-02-15',
            icon: '🏆'
          },
          {
            id: 2,
            title: '铁人耐力',
            description: '完成连续3小时比赛',
            date: '2024-02-10',
            icon: '💪'
          }
        ]
      };
      setStats(initialStats);
    } else {
      setStats(storedStats);
    }
  }, [user]);

  if (!stats) return null;

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h2 className="text-xl font-semibold mb-4">赛道数据</h2>
      <div className="grid grid-cols-2 gap-4">
        <div className="p-4 bg-gray-50 rounded-lg">
          <div className="text-sm text-gray-600">总比赛次数</div>
          <div className="text-2xl font-bold text-gray-900">{stats.totalRaces}</div>
        </div>
        <div className="p-4 bg-gray-50 rounded-lg">
          <div className="text-sm text-gray-600">最快圈速</div>
          <div className="text-2xl font-bold text-blue-600">{stats.bestLapTime}</div>
        </div>
        <div className="p-4 bg-gray-50 rounded-lg">
          <div className="text-sm text-gray-600">累计时长</div>
          <div className="text-2xl font-bold text-gray-900">{stats.totalHours}小时</div>
        </div>
        <div className="p-4 bg-gray-50 rounded-lg">
          <div className="text-sm text-gray-600">平均圈速</div>
          <div className="text-2xl font-bold text-gray-900">{stats.averageLapTime}</div>
        </div>
      </div>

      <div className="mt-6">
        <h3 className="text-lg font-semibold mb-3">最新成就</h3>
        <div className="space-y-3">
          {stats.recentAchievements.map((achievement) => (
            <div
              key={achievement.id}
              className="flex items-center space-x-3 p-3 bg-gray-50 rounded-lg"
            >
              <span className="text-2xl">{achievement.icon}</span>
              <div>
                <div className="font-medium">{achievement.title}</div>
                <div className="text-sm text-gray-600">{achievement.description}</div>
                <div className="text-xs text-gray-500 mt-1">
                  获得于 {achievement.date}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default TrackData;